<template>
  <view class="address">
    <my-header title="地址管理"></my-header>
    <my-content class="content">
      <view style="visibility: hidden">x</view>
      <view class="address_box">
        <view @click="selectAddress(item)" class="address_item" v-for="item in addressData" :key="item.id">
          <view class="address_top">
            <view class="address_top_content">
              <view class="user_info">
                <view class="username">{{ item.username }}</view>
                <view class="mobile">{{ item.mobile }}</view>
              </view>

              <view class="address_info">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.detail }}</view>
            </view>
          </view>
          <view class="address_bottom">
            <view class="address_default" v-if="item.status == 1">默认</view>
            <view class="address_default un_default" v-else></view>
            <view class="address_action">
              <view class="address_action_del" @click.stop="delAddress(item.id)">删除</view>
              <!-- <view class="address_action_split">|</view> -->
              <view class="address_action_edit" @click.stop="header(`/pages/address/edit?id=${item.id}`)">编辑</view>
            </view>
          </view>
        </view>
      </view>

      <view style="visibility: hidden; margin-top: 60rpx">1</view>

      <view class="add_btn" @click="header(`/pages/address/add`)">新增地址</view>
    </my-content>
    <my-alert-dialog
      ref="alertDialog"
      title="提示"
      content="确定删除地址吗？"
      @confirm="handleConfirm"
    ></my-alert-dialog>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      addressData: [],
      page: 1,
      lastPage: 1,
      resource: 'address',
    }
  },
  onLoad(option) {
    this.resource = option.resource || 'address'
    this.getAddress()
  },
  onShow() {},

  methods: {
    getAddress() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userAddress
        .index({ page: this.page })
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.addressData = res.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleConfirm({ id, index }) {
      uni.showLoading({
        title: '数据删除中~',
      })
      api.userAddress
        .del(id)
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.addressData.splice(index, 1)
            this.show('删除成功')
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    delAddress(id, index) {
      this.$refs.alertDialog.show({ id, index })
    },
    selectAddress(item) {
      if (this.resource == 'order') {
        let pages = getCurrentPages()
        let currPage = pages[pages.length - 1] //当前页面
        let prevPage = pages[pages.length - 2]
        prevPage.$vm.addressData = item // 修改上一页面的address_id
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          })
        }, 500)
      }
    },
  },
}
</script>

<style lang="scss">
.address {
  background-color: #141414;
  min-height: 100vh;
  height: 100%;
}
.content {
  display: flex;
  flex-direction: column;

  /* padding-top: 80rpx; */

  .address_box {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    .address_item {
      margin: 0 20rpx 20rpx 20rpx;
      background-color: #1f1f1f;
      border-radius: 10rpx;
      color: white;
      padding: 0 10rpx;
      .address_top {
        display: flex;
        flex-direction: column;
        height: 140rpx;
        justify-content: center;
        border-bottom: 1rpx solid #292929;
        margin: 0 20rpx;
        .address_top_content {
          height: 140rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .user_info {
            display: flex;
            .username {
              font-size: 32rpx;
              margin-right: 8rpx;
            }
            .mobile {
              align-self: flex-end;
              font-size: 25rpx;
            }
          }
          .address_info {
            color: #808080;
            font-size: 24rpx;
            margin-top: 10rpx;
          }
        }
      }
      .address_bottom {
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        align-items: center;
        margin: 0 20rpx;
        .address_default {
          background-color: #ded000;
          font-size: 24rpx;
          /* padding: 4rpx 12rpx; */
          border-radius: 4rpx;
          height: 32rpx;
          text-align: center;
          width: 72rpx;
          color: #000;
          &.un_default {
            background-color: transparent;
          }
        }
        .address_action {
          display: flex;
          align-items: center;
          color: #999;
          font-size: 28rpx;
          .address_action_edit {
            color: #ded000;
            margin-left: 80rpx;
          }
          .address_action_split {
            margin: 0 20rpx;
          }
        }
      }
    }
  }

  .add_btn {
    background: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
    background-size: 100% 100%;
    position: fixed;
    bottom: 10rpx;
    width: 90%;
    left: 5%;
    // border-radius: 10rpx;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: #fff;
  }
}
</style>
